<script setup>
import { useUserStore } from '@/stores'
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const userId = useRoute().query.id
const User = useUserStore()
const router = useRouter()
const userAddressList = computed(() => {
  return User.userList.find((item) => item.id == userId)
})
const changeCurrentAddress = (id) => {
  console.log(id);
  console.log([...User.userList]);
  User.userList.find((item) => item.id == userId).currentAddress = id
  console.log(User.userList)
  router.back()
}
console.log(userId)
console.log(userAddressList.value)
</script>
<template>
  <div class="address-view">
    <div class="address-view-top">
      <div class="address-view-top-left iconfont" @click="$router.go(-1)">&#xe697;</div>
      <div class="address-view-top-center">收货地址</div>
      <div
        class="address-view-top-right"
        @click="$router.push({ path: '/createAddress', query: { id: userId } })"
      >
        新建
      </div>
    </div>
    <div
      class="address-view-item"
      v-for="(item, index) in userAddressList.addressList"
      :key="index"
      @click="changeCurrentAddress(index)"
    >
      <div class="address-view-item-top">
        <div class="address-view-item-top-left">{{ item.name }}</div>
        <div class="address-view-item-top-right">{{ item.phone }}</div>
      </div>
      <div class="address-view-item-bottom">
        {{ item.address_text }}
      </div>
    </div>
  </div>
</template>
<style scoped lang='scss'>
.address-view {
  width: 100%;
  height: 100%;
  &-top {
    $height: 40px;
    font-size: 20px;
    line-height: $height;
    height: $height;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    padding: 0 10px;
    &-left {
      font-size: 24px;
    }
  }
  &-item {
    margin: 25px;
    padding: 10px;
    font-size: 15px;
    background-color: #d3d3d345;
    border-radius: 5px;

    &-top {
      display: flex;
      color: #b7b7b7;
      & div {
        width: 50%;
      }
    }
    &-bottom {
      margin-top: 20px;
    }
  }
}
</style>